<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定</title>
    <script src=".././vue.js/vue.js"></script>
</head>

<body>
    <!--Vue中有2种数据绑定的方式:
        1.单项绑定(v-bind)数据只能从data流向页面
        2.双向绑定(v-model)数据能实现页面和data相互流通
        备注:
        1.v-model一般使用在表单类元素(输入类input select)
        2.v-model:value可以简写为v-model ,v-model默认收集value值

    -->

   
    
    <div id="root">
    单项数据绑定: <input type="text" :value="name">
    双项数据绑定: <input type="text" v-model="name">
       
    </div>

    <script>
        Vue.config.productionTip=false//阻止vue在启动时候生成生产提示
        
        //创建vue实例
        new Vue({
            el:'#root',
            data:{
                name:'你好'
            }
          
        })
            </script>
</body>
</html>